<template>
	<div>
		<div class="flex items-center justify-between">
			<div class="rounded-8px bg-#1A1A1A box-border w-48% h-40px text-14px flex items-center justify-center">
				逐仓
			</div>
			<div class="w-48%">
				<el-select v-model="value"  class="right-form-select"
				suffix-icon="CaretBottom"
				popper-class="contract-right-form-popper">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
		</div>
		<!-- 滑块 -->
		<FormPay></FormPay>
	</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import FormPay from './FormPay.vue';

const options = ref<any[]>([
	{
		value:'10x',
		label:'10x'
	},
	{
		value:'20x',
		label:'20x'
	},
	{
		value:'30x',
		label:'30x'
	},
	{
		value:'40x',
		label:'40x'
	}
]);

const value = ref('10x');
const activeName = ref('first');
</script>
<style lang="scss" scoped>
.right-form-select{
	width: 100%;
	height: 40px;

	::v-deep .el-select__wrapper{
		height: 40px;
		background-color: #1A1A1A;
		border-radius:4px;
		box-shadow:none;
	}
	::v-deep .el-select__placeholder{
		color: #fff;
	}
}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item,
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav,
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav,
::v-deep .el-tabs--card>.el-tabs__header {
	border: none !important;
	color: #B5B5B5 !important;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav {
	width: 100%;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item {
	padding: 0 20px !important;
	font-size: 14px !important;
	width: 50%;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav {
	border-radius: 8px 8px 8px 8px !important;
	border: 1px solid #1A1A1A !important;
	background-color: #1A1A1A !important;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
	position: relative !important;
	/* 确保伪元素基于当前元素定位 */
	z-index: 1 !important;
	/* 确保原元素在伪元素上方 */
	color: #E5E6EB !important;
	display: flex !important;
	justify-content: center !important;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active::after {
	content: "";
	/* 必须设置 content 属性，即使为空 */
	position: absolute !important;
	/* 设置绝对定位 */
	// top: 10%;
	/* 定位到元素的顶部 */
	// left: 10%;
	/* 定位到元素的左侧 */
	width: 94% !important;
	/* 背景宽度与原元素一致 */
	height: 95% !important;
	/* 背景高度与原元素一致 */
	background: #07B175 !important;
	border-radius: 4px 4px 4px 4px !important;
	/* 设置背景颜色，这里使用半透明的黄色 */
	z-index: -1 !important;
	/* 确保背景在原元素的下方 */
}
</style>
<style lang="scss">
.contract-right-form-popper{
	.el-popper__arrow:before{
		display: none;
	}
}
.spot-right-form-tabs {
	.el-tabs__header {
		margin-bottom: 0 !important;
	}
}
</style>
